<template>
    <el-card class="register-card" v-loading="loading">
        <h2>Register</h2>
        <el-form :model="form" @submit.prevent="onSubmit" ref="formRef">
            <el-form-item label="Username">
                <el-input v-model="form.username" />
            </el-form-item>

            <el-form-item label="Email">
                <el-input v-model="form.email" />
            </el-form-item>

            <el-form-item label="Password">
                <el-input type="password" v-model="form.password" />
            </el-form-item>


            <el-form-item label="Group">
                <el-select label = "Group" v-model="form.group">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        />
                </el-select>
            </el-form-item>

            <el-form-item label="Avatar">
                <!-- 使用 v-model:file-list 让 el-upload 管理 fileList -->
                <el-upload
                    v-model:file-list="fileList"
                    :auto-upload="false"
                    :http-request="httpRequest"
                    :on-change="onChange"
                    :before-upload="beforeUpload"
                    list-type="picture"
                >
                    <el-button size="small">Select Avatar</el-button>
                </el-upload>
            </el-form-item>

            <el-button type="primary" @click="onSubmit">Register</el-button>
        </el-form>
    </el-card>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    import { post } from '@/axios/api'; // 你之前的 post 方法
    import { ElMessage } from 'element-plus';
    import { useRouter } from 'vue-router';
    import { sha256Hex } from '@/common/useAuth';

    // 表单数据
    const form = ref({ username: '', email: '', password: '', group: '' });

    const router = useRouter()

    const options = [
        { value: 'A组', label: 'A组' },
        { value: 'B组', label: 'B组' },
        { value: 'C组', label: 'C组' },
    ]


    // fileList 使用 el-upload 的文件对象数组（每项通常包含 raw/file 对象）
    const fileList = ref<any[]>([]);

    // formRef 可选，用于后续表单校验
    const formRef = ref(null);
    const loading = ref(false)
    /**
     * httpRequest: 当 auto-upload=false 时，Element Plus 仍会在内部调用 httpRequest
     * 期望你负责把文件上传（或直接调用 onSuccess 来告知组件“上传成功”）。
     * 这里我们不做真正的上传（我们在提交表单时统一上传），所以需要在此回调里
     * 直接调用 onSuccess 以避免内部错误。
     *
     * 如果你要在选择时立刻上传，请在这里实现真正的上传逻辑并在成功时调用 onSuccess。
     */
    function httpRequest(options: any) {
        // options = { file, onProgress, onError, onSuccess, filename, data, headers }
        // 我们不自动上传，直接标记成功（以避免组件抛错）。
        // 以异步方式调用 onSuccess 更稳妥：
        setTimeout(() => {
            if (typeof options.onSuccess === 'function') {
                options.onSuccess({ ok: true });
            }
        }, 0);
    }

    // onChange signature: (file, fileList)
    function onChange(file: any, fl: any[]) {
        // 这里 file 是当前操作的文件对象，fl 是最新的 fileList
        fileList.value = fl;
    }

    // beforeUpload 可以用于校验文件大小/类型，返回 false 会阻止添加到列表
    function beforeUpload(file: File) {
        // 例如限制 5MB
        const maxMB = 5;
        if (file.size / 1024 / 1024 > maxMB) {
            ElMessage.error(`Avatar must be <= ${maxMB} MB`);
            return false;
        }
        // 只允许图片类型
        if (!/^image\//.test(file.type)) {
            ElMessage?.error('Only image files allowed for avatar');
            return false;
        }
        return true;
    }

    // 提交表单时把 avatar 与其它字段一起以 FormData 上传到后端
    async function onSubmit() {
        // 简单验证
        if (!form.value.username || !form.value.password) {
            ElMessage.warning('username and password required');
            return;
        }
        loading.value = true;

        const payloadPassword = await sha256Hex(form.value.password);


        const fd = new FormData();
        fd.append('username', form.value.username);
        fd.append('email', form.value.email);
        fd.append('password', payloadPassword);
        fd.append('group', form.value.group)
        if (fileList.value.length) {
            // fileList 项通常含 raw (原生 File)
            const f = fileList.value[0].raw ?? fileList.value[0];
            fd.append('avatar', f);
        }

        try {
            let res:any = await post('auth/register/', fd, {
                headers: { 'Content-Type': 'multipart/form-data' }
            });
            if (res && res.success) {
                ElMessage.success('Registered, redirecting to login in 3s...');
                
                // 倒计时 3 秒后跳转
                setTimeout(() => {
                    router.push('/login');
                }, 3000);
            }
        } catch (err: any) {
            console.error(err);
            const msg = err?.response?.data?.detail ?? err?.message ?? 'register failed';
            ElMessage.error(msg);
        } finally {
            loading.value = false;
        }
    }
</script>

<style scoped>
    .register-card {
        width: 420px;
        margin: 40px auto;
        padding: 20px;
    }
</style>
